import { Component } from "solid-js";
import style from "../App.module.scss";

type Theme = "light" | "dark" | "neon" | "pastel" | "deepDark" | "pureWhite" | "cute";

interface ThemeSelectorProps {
  currentTheme: Theme;
  onThemeChange: (theme: Theme) => void;
}

const ThemeSelector: Component<ThemeSelectorProps> = (props) => {
  return (
    <div class={`${style.action} ${style.themeSelector}`}>
      <select
        onChange={(e) => {
          const select = e.target as HTMLSelectElement;
          props.onThemeChange(select.value as Theme);
        }}
        value={props.currentTheme}
      >
        <option value="light">Light Theme</option>
        <option value="dark">Dark Theme</option>
        <option value="neon">Neon Theme</option>
        <option value="pastel">Pastel Theme</option>
        <option value="deepDark">Deep Dark Theme</option>
        <option value="pureWhite">Pure White Theme</option>
        <option value="cute">Cute Theme</option>
      </select>
    </div>
  );
};

export default ThemeSelector;


